<template>
	<view>
		<view class="smart-page-head">
			<view class="smart-page-head-title">slider,滑块</view>
		</view>

		<view class="smart-padding-wrap">
			<view class="uni-title">显示当前value</view>
			<view>
				<slider value="50" @change="sliderChange" show-value />
			</view>

			<view class="uni-title">设置步进</view>
			<view>
				<slider value="50" step="5" @change="sliderChange" show-value></slider>
			</view>
			<view class="uni-title">设置最大最小值</view>
			<view>
				<slider value="100" @change="sliderChange" min="50" max="200" show-value />
			</view>
			<view class="uni-title">不同颜色和大小的滑块</view>
			<view>
				<slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000"
					block-color="#8A6DE9" block-size="20" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			sliderChanfe(e) {
				uni.showToast({
					icon: 'success',
					title: '当前值: ' + e.detail.value,
					duration: 2000
				});
				console.log('value 发生变化:' + e.detail.value)
			}
		}
	}
</script>

<style>

</style>